<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>main</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="Martin Novák">
	
	<link rel="stylesheet" type="text/css" href="yui2/fonts-min.css" />
  <link rel="stylesheet" type="text/css" href="yui2/skins/sam/tabview.css" />
	
	<link rel="stylesheet" type="text/css" href="validation.css" media="screen" />
    <!-- JS -->
    <script type="text/javascript" src="yui/yui.js"></script>
    <script type="text/javascript" src="yui/dom.js"></script>
    <script type="text/javascript" src="yui/event.js"></script>
    <script type="text/javascript" src="form.js"></script>
  	<script type="text/javascript" src="validation.js"></script>
  	
    <script type="text/javascript" src="yui2/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="yui2/element-beta.js"></script>
    <script type="text/javascript" src="yui2/tabview.js"></script>
</head>
<body>

<h1>User registration example</h1>

<form name="frm" id="frm" class="val_error_after val_lang-en val_no_disable_submits">
  <div id="demo" class="yui-navset">
      <ul class="yui-nav">
          <li class="selected"><a href="#tab1"><em>Tab One Label</em></a></li>
          <li><a href="#tab2"><em>Tab Two Label</em></a></li>
      </ul>            
      <div class="yui-content">
          <div id="tab1">
<table width="500">
  <tr>
    <td class="firsttd"><label for="username">User name:</label></td>
    <td class="secondtd">
      <input type="text" name="username" id="username" value="" class="val_required val_minlen-3 val_maxlen-10" />
    </td>
  </tr>
  <tr>
    <td class="firsttd"><label for="pwd">Password:</label></td>
    <td class="secondtd">
      <input type="password" name="pwd" id="pwd" value="" class="val_required val_minlen-8 val_maxlen-10" />
    </td>
  </tr>
  <tr>
    <td class="firsttd"><label for="pwd2">Confirm password:</label></td>
    <td class="secondtd">
      <input type="password" name="pwd2" id="pwd2" value="" class="val_passwordcheck" />
    </td>
  </tr>
  
    <tr>
    <td class="firsttd"><label for="email">Email:</label></td>
    <td class="secondtd">
      <input type="text" name="email" id="email" value="" class="val_required val_maxlen-40 val_email" />
    </td>
  </tr>
  <tr>
    <td class="firsttd"><label for="desc">Description:</label></td>
    <td class="secondtd">
      <textarea name="desc" id="desc" value="" class="val_maxlen-255" style="width: 300px; height: 100px"></textarea>
    </td>
  </tr>
  <tr>
    <td class="firsttd"><label for="work">Work position:</label></td>
    <td class="secondtd">
      <select name="work" class="val_minlen-2 val_maxlen-3" id="work" multiple="multiple">
        <option value="1">Student</option>
        <option value="2">Accountant</option>
        <option value="3">Manager</option>
        <option value="4">Programer</option>
        <option value="5">Web designer</option>
      </select>
    </td>
  </tr>
  <tr>
    <td class="firsttd"><label for="gender">Gender:</label></td>
    <td class="secondtd">
      <input type="radio" name="gender" id="gender-1" value="1" class="val_required" /><label for="gender-1">Male</label><br/>
      <input type="radio" name="gender" id="gender-2" value="2" class="val_required" /><label for="gender-2">Female</label>
    </td>
  </tr>
  <tr><td colspan="2">&nbsp;</td></tr>
</table>
</div>
<div id="tab2">
  <label for="req-hidden">Hidden required option:</label>
  <input type="text" class="val_required" name="req-hidden" id="req-hidden" />
</div>
</div>
<div style="width: 500px; text-align: right">
  	    <input type="submit" onclick="return checkSubmit()" value="Continue..." />
</div>
</form>

<script type="text/javascript">
try{
  var f = new mn.forms.Form('frm');
  f.hookFieldsChange();
  document.forms['frm'][0].focus();
}
catch(e) {
  alert(e)
}

var tabView = new YAHOO.widget.TabView('demo');

function checkSubmit()
{
  //alert("Form content changed: " + f.contentChanged);
  try	{
    var validator = new mn.validation.Validator();
    validator.tabView = tabView;
    validator.checkForm(f);
    validator.errorsCount == 0;
    return false;
  }
  catch(e) {
    alert(e)
    return false;
  }
}
</script>
</body>
</html>
